import './index.styl';
console.log('hello brown');

$(function () {
  //fps
  FPSMeter.theme.my = {
    heatmaps: [{
      saturation: 0.5,
      lightness: 0.6
    }],
    container: {
      // Settings
      heatOn: "backgroundColor",

      // Styles
      padding: "2px",
      minWidth: "40px",
      height: "20px",
      lineHeight: "17px",
      textAlign: "center",
      background: "#aaa",
      border: "1px solid #ccc",
      borderColor: "rgba(0,0,0,0.1)",
      color: "#fff",
      textShadow: "1px 1px 0 rgba(0,0,0,0)"
    },
    count: {
      // Styles
      position: "absolute",
      top: 0,
      right: 0,
      padding: "5px 12px",
      height: "10px",
      fontSize: "14px",
      fontFamily: "Consolas, Andale Mono, monospace",
      zIndex: 2
    },
    legend: {
      // Styles
      position: "absolute",
      top: 0,
      left: 0,
      padding: "5px 0 5px 10px",
      height: "20px",
      fontSize: "0px",
      lineHeight: "20px",
      fontFamily: "sans-serif",
      textAlign: "left",
      float: "left",
      zIndex: 2
    },
    graph: {
      // Styles
      position: "relative",
      boxSizing: "padding-box",
      MozBoxSizing: "padding-box",
      height: "100%",
      zIndex: 1
    },
    column: {
      // Settings
      width: 2,
      spacing: 1,

      // Styles
      background: "#777",
      backgroundColor: "rgba(0,0,0,.2)"
    }
  };
  setupFpsMeters();

  //loading
  $('#loading').animate({
    opacity: '0'
  }, 700, function () {
    $('#loading').hide()
  })
  //初始化fullpage
  $('#app').fullpage({
    // 滚动速度
    scrollingSpeed: 700,
    //垂直居中
    verticalCentered: true,
    //顶部回滚
    loopTop: true,
    //底部回滚
    loopBottom: true,
    //导航状态
    navigation: false,
    //固定按钮
    menu: '#control',
    //回调函数
    afterLoad: function (anchorLink, index) {
      if (index == 1) {
        console.log('第1模块加载完毕');
      }
      if (index == 2) {
        console.log('第2模块加载完毕');
      }
      if (index == 3) {
        //循环动画
        let css = {
          width: '300px'
        };
        $('.section:nth-child(3) span').animate(css, 800, rowBack);

        function rowBack() {
          if (css.width === '0px') {
            css.width = '300px'
          } else if (css.width === '300px') {
            css.width = '0px'
          }
          $('.section:nth-child(3) span').animate(css, 800, rowBack);
        }
      }
      if (index == 4) {
        console.log('第4模块加载完毕');
      }
    },
    onLeave: function (index, direction) {
      if (index == 1) {
        console.log('第1模块卸载完毕');
      }
      if (index == 2) {
        console.log('第2模块卸载完毕');
      }
      if (index == 3) {
        console.log('第3模块卸载完毕');
        $('.section:nth-child(3) span').animate({
          width: '0'
        })
      }
      if (index == 4) {
        console.log('第4模块卸载完毕');
      }
    }
  });
  //固定按钮
  $('#control').click(function () {
    $.fn.fullpage.moveSectionDown();
  })
});
//test
//var meter = new FPSMeter([anchor][, options]);
function setupFpsMeters() {
  var heading = document.getElementById('heading');
  var meter = new FPSMeter(heading, {
    heat: true,
    theme: 'my',
    graph: true
  });

  function tick() {
    meter.tick();
    window.requestAnimationFrame(tick);
  }
  window.requestAnimationFrame(tick);
}